<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> XXX送水公司后台管理系统</title>

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script>
        $(function () {
            // 为“selectAll”复选框绑定单击事件，一旦触发改时间，将下面的复选框“全选”or"全不选"
            $("#selectAll").click(function () {
                //  $("input[name=chkHistory]")表示选择“历史列表”所有的复选框，如果状态是“未选中”，将其
                // 设置为“选中”，如果状态是“已选择”，将其设置为“未选中”
                $("input[name=chkHistory]").prop("checked",$(this).prop("checked"))
            })
            /**
             * 为“批量删除”按钮绑定“单击”事件，将所有选中“的复选框”对应的“送水历史信息”批量删除
             * 步骤：
             * 1 获取所有“选中”的复选框
             * 2 如果一个都没选中，给出提示信息“至少选择一项”，结束操作。
             * 3 获取每个“选中”复选框的value值，进行拼接。将它作为参数传递给后端
             * 4 使用异步“Ajax”技术向后端发起请求进行“批量删除”
             * */
            $("#batchDelete").click(function () {
                //获取所有“已选中”的复选框
                let checkedList = $("input[name=chkHistory]:checked");
                if (checkedList.length == 0) {
                    alert("请至少选择一项");
                    return ;
                }
                //存储所有已选中复选框的value属性值
                let ids = "";
                //遍历每一个已选中的复选框
                $(checkedList).each(function () {
                    //获取复选框的value属性值
                    let hid = $(this).val();
                    ids += ","+hid;
                })

                $.ajax({
                    url:'/history/batchDelete',
                    data:{
                        idList:ids
                    },
                    method:'POST',
                    success:function (data,status) {
                        if (data == "OK") {
                            alert("批量删除成功");
                            window.location.href='/history/hisList';
                        } else {
                            alert("批量删除失败");
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>

<div id="viewport">

    <!-- Sidebar -->
    <div id="sidebar" th:replace="waterMainMenu::sidebar">

    </div>

    <!-- Content -->
    <div id="content">
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">

        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <a class="btn btn-primary" th:href="@{/history/preSaveHis}">添加送水历史</a>
                        <a class="btn btn-danger" id="batchDelete" href="#">批量删除</a>
                    </div>
                    <div class="col-md-8">
                        <form class="form-inline" th:action="@{/history/searchCalcHis}">
                            <input type="date" class="form-control" th:value="${startDate}" th:name="startDate" placeholder="请输入开始时间" required/>
                            <input type="date" class="form-control" th:value="${endDate}" th:name="endDate" placeholder="请输入结束时间"/>
                            <input type="submit" class="btn btn-primary" name="search" value="搜索"/>
                        </form>
                    </div>
                </div>

                <div class="col-md-12">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <td>
                                <input id="selectAll" value="selectAll" type="checkbox"/>全选/全不选
                            </td>
                            <td>送水历史编号</td>
                            <td>送水工名称</td>
                            <td>客户名称</td>
                            <td>送水时间</td>
                            <td>送水数量</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="his : ${hisList}">
                            <td><input type="checkbox" name="chkHistory" th:value="${his.hid}"/></td>
                            <td th:text="${his.hid}"></td>
                            <td th:text="${his.worker.workerName}"></td>
                            <td th:text="${his.customer.custName}"></td>
                            <td th:text="${#dates.format(his.sendWaterTime,'yyyy-MM-dd')}"></td>
                            <td th:text="${his.sendWaterCount}"></td>
                            <td>
                                <a class="glyphicon glyphicon-remove" th:href="@{'/history/delHistory/'+${his.hid}}">删除</a>
                                <a class="glyphicon glyphicon-edit" th:href="@{'/history/preUpdateHis/'+${his.hid}}">编辑</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

</body>
</html>